<%--
  Created by IntelliJ IDEA.
  User: YuanDali
  Date: 2020/7/20
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>电影详情</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- fevicon -->
    <link rel="icon" href="images/fevicon.png" type="image/gif" />
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <!-- Tweaks for older IEs-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- owl stylesheets -->
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">
    <link href="css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />

    <style>
        #movieMessageHead
        {
            /*background-color:#72438f;*/
            background-color: rgba(191, 180, 143, 0.5);
            /*opacity:0.2;*/
            color:dimgrey;
            font-size:18px;
        }
        #storyIntroduce
        {
            display:inline;
        }
        .mod-title h2 {
            display: inline-block;
            padding: 0;
            font-weight: 400;
            font-size: 18px;
            color: #333;
            line-height: 18px;
            margin-bottom: 25px;
        }
        .portrait {
            border-radius: 50%;
            overflow: hidden;
            width: 50px;
            height: 50px;
            display:inline-block;
        }
        .main-header {
            position: relative;
            font-size: 16px;
            display:inline-block;
            margin-left: 15px;
        }
        .module {
            position: relative;
            margin-bottom: 60px;
            margin-left: 191px;
            margin-top: 40px;
        }
        .comment-container .comment-content {
            margin-top: 20px;
            padding-bottom: 30px;
            border-bottom: 1px solid #e5e5e5;
            color: #666;
            line-height: 26px;
            font-size: 14px;
        }

        .comment-entry {
            cursor: pointer;
            position: absolute;
            top: -10px;
            right: 0;
            display: block;
            height: 30px;
            padding: 0 10px;
            border-radius: 15px;
            border: 1px solid #ef4238;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            color: #ef4238;
            margin-right: 359px;
        }
        input{
            border: 0;
            width: 950px;
            background-color: rgba(191, 180, 143, 0.09);
            display:inline-block;
        }
        button{
            padding: 0 10px;
            border-radius: 15px;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            color:dimgrey;
            display:inline-block;
            background-color: rgba(191, 180, 143, 0.09);

        }
        .replyCommentButtonClass{
            position: absolute;
            right: 300px;
        }
        .moreReplyCommentButtonClass{
            position: absolute;
            right: 200px;
        }
        .chileComment{
            border-radius: 50%;
            overflow: hidden;
            width: 30px;
            height: 30px;
            display:inline-block;
        }
        .chileCommentUl{
            margin-left: 50px;
        }

        .center-wrap {
            margin-left: 200px;
            width: 990px;
            margin-top: 100px;
            margin-bottom: 70px;
        }



        .hall-table {
            width: 100%;
            color: #797979;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border-color: grey;
            display: table;
            box-sizing: border-box;
        }

        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
            background-color: rgba(191, 180, 143, 0.3);
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
            background-color: rgba(191, 180, 143, 0.1);
        }

        th {
            display: table-cell;
            vertical-align: inherit;
            font-weight: bold;
        }
        .select-tags{
            display:inline-block;
        }
        label{
            font-size: 30px;
        }
        .filter-select a{
            font-size: 20px;
        }

        .cinemaDetailsMessage{
            margin-left: 100px;
        }

        .ticket-class{
            margin-bottom: 120px;
        }

        .address-class{
            background-color: rgba(191, 180, 143, 0.2);
        }
        a{
            margin: 20px;
        }

        .backgroundClass{
            background-color: rosybrown;
        }

    </style>

</head>
<body>
<!-- header section start -->
<div class="header_section">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img src="images/logo.png">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/index.jsp">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/movies.jsp">影片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/tv.jsp">影院</a>
                </li>
            </ul>
            <%--            <div class="search_icon"><a href="#"><img src="images/notification-icon.png"><span class="padding_left_15">Notificastion</span></a></div>
                        <div class="search_icon"><a href="#"><img src="images/eye-icon.png"><span class="padding_left_15">Viwe</span></a></div>--%>

            <div class="search_icon"><a href="/front/login.jsp"><img src="images/user-icon.png" id="accountImg" ><span class="padding_left_15" id="accountLoginName">登录</span></a></div>
            <div class="search_icon"><a href="#"><img src="images/notification-icon.png"><span class="padding_left_15">联系客服</span></a></div>

            <div class="search_icon" style="z-index: 2">
                <a href="order.jsp"  ><span class="padding_left_15"  >个人订单</span></a>
            </div>
            <div class="search_icon" style="z-index: 2">
                <a href="collect.jsp"  ><span class="padding_left_15"  >收藏夹</span></a>
            </div>
            <div class="search_icon" style="...">
                <a href="admin-info.jsp?accountName=${sessionScope.account.accountName}"  ><span class="padding_left_15" id="" >个人中心</span></a>
            </div>
        </div>
    </nav>
</div>
<!-- header section end -->
<!-- cooming  section start -->
<div class="cooming_section layout_padding"  id="movieMessageHead">
    <div class="container" >
        <div class="row" id="movieMessage">

            <%--<div class="col-md-6">
                <div class="image_17">
                    <div class="image_17">
                        <img src="images/img-17.png">
                    </div>
                </div>
            </div>--%>
            <%--<div class="col-md-6">
                <ul class="cont-info">
                    <li>名称：神奇女侠</li>
                    <li>导演：管虎</li>
                    <li>主演：姜武,张译,王千源,黄志忠,张俊一,欧豪,胡晓光,张承</li>
                    <li>类型：剧情,战争,历史</li>
                    <li data-spm-anchor-id="a1z21.6646385.w1.i0.13b31f04OPDxIP">制片国家/地区：中国大陆</li>
                    <li>片长：165分钟</li>
                    <li class="J_shrink shrink" data-spm-anchor-id="a1z21.6646385.w1.i1.13b31f04OPDxIP" style="height: 53px;">剧情介绍：1937年淞沪会战末期，国民革命军第88师524团留守上海四行仓库，与租界一河之隔，孤军奋战4昼夜，造就了罕见的被围观的战争；为壮声势，四百人对外号称八百人。 电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业影片，将于2019年7月5日全国上映。
                        <a class="shrink-btn" href="javascript:;">收起&lt;&lt;</a></li>
                </ul>
            </div>--%>
        </div>

    </div>

    <%--//购票--%>

    <div class="center-wrap address-class">
        <h2 >选座购票</h2><hr>
        <ul class="filter-select">
            <li id="cinemaDetailsLi">
                <label>选择影城</label>
                <div class="select-tags" id="cinemaNameDiv">
                <%--<a href="javascript:;" >万达影院</a>--%>

               <%-- <a class="J_show select-show" href="javascript:;">更多&gt;</a>--%>
                </div>

                <%--<div class="cinemaDetailsMessage" style="visibility: hidden">
                    <p style="font-size: 20px;color: #00b5f9">UME影城（西安小寨店）</p>
                    <p style="font-size: 17px">甘肃省庆阳市正宁县</p>
                </div>--%>

            </li>
            <li>
                <label>播放厅名  </label>
                <div class="select-tags" id="hallNameId">
                    <a class="current hallName backgroundClass" href="javascript:;" style="font-size: 27px;" >一号厅</a>
                    <a class="current hallName" href="javascript:;" style="font-size: 27px">二号厅</a>
                    <a class="current hallName" href="javascript:;" style="font-size: 27px">三号厅</a>
                    <a class="current hallName" href="javascript:;" style="font-size: 27px">四号厅</a>
                </div>
            </li>


            <li>
                <label>播放类型  </label>
                <div class="select-tags" id="hall-type">
                    <a class="current hallType backgroundClass" href="javascript:;" style="font-size: 27px;" >普通</a>
                    <a class="current hallType" href="javascript:;" style="font-size: 27px">3D</a>
                    <a class="current hallType" href="javascript:;" style="font-size: 27px">4D</a>
                </div>
            </li>

            <li>
                <label>选择时间</label>
                <div class="select-tags" id="select-date">
                    <span id="todaySpan">

                    </span>
                    <input type="date" style="width: 200px" id="dateInpute">
                    <label id="dateLabel" style="font-size: 20px;background-color: #9E9E9E">选择日期</label>
                </div>
            </li>
        </ul>
    </div>
    <!-- Hall Tabel -->
    <div class="center-wrap ticket-class">
        <table class="hall-table">
            <thead>
            <tr>
                <th class="hall-time">开始时间</th>
                <th class="hall-type">结束时间</th>
                <th class="hall-name">放映类型</th>
                <th class="hall-flow">电影名称</th>
                <th class="hall-price">现价（元）</th>
                <th class="hall-buy">&nbsp;&nbsp;&nbsp;选座购票</th>
            </tr>
            </thead>
            <tbody id="movieTbody">
           <%-- <tr>
                <td class="hall-time">
                    <em class="bold">16:40</em>
                </td>
                <td class="hall-type">
                    <em class="bold">16:40</em>
                </td>
                <td class="hall-name">
                    5号激光厅
                </td>

                <td class="hall-flow">
                    宽松
                </td>
                <td class="hall-price" data-partcode="yueke">
                    <em class="now">25.00</em>
                </td>
                <td class="hall-seat">
                    <a class="seat-btn" href="https://dianying.taobao.com/seatOrder.htm?scheduleId=764189352&amp;n_s=new">选座购票</a>
                </td>
            </tr>--%>
            </tbody>
        </table>
    </div>


    <div class="module">
        <div class="mod-title">
            <h1>热门短评</h1>
        </div>
        <div class="mod-content">
            <div class="comment-list-container" data-hot="10" id="realComment">

                <%--<ul>
                   <li class="comment-container " >
                        <div class="portrait-container">
                            <div class="portrait" >
                                <img src="https://img.meituan.net/avatar/25e5d97625500c39b708b93d4611e086150621.jpg@100w_100h_1e_1c" alt="">
                            </div>
                            <div  class="main-header clearfix">
                                <div class="user">
                                    <span class="name">丛云翔</span>
                                </div>
                                <div class="time" title="2019-07-21 13:26:07">
                                    <span title="2019-07-21 13:26:07">2019-07-21</span>
                                    <ul class="score-star clearfix" data-score="10">
                                        <li>
                                            <i class="half-star left active"></i><i class="half-star right active"></i>    </li>
                                        <li>
                                            <i class="half-star left active"></i><i class="half-star right active"></i>    </li>
                                        <li>
                                            <i class="half-star left active"></i><i class="half-star right active"></i>    </li>
                                        <li>
                                            <i class="half-star left active"></i><i class="half-star right active"></i>    </li>
                                        <li>
                                            <i class="half-star left active"></i><i class="half-star right active"></i>    </li>
                                    </ul>

                                </div>

                            </div>
                           &lt;%&ndash; <i class="level-2-icon"></i>&ndash;%&gt;
                        </div>
                        <div class="main">
                            <div class="comment-content">
                                姜子牙是哪吒的下一部？
                                ————————
                                封神宇宙即将开启
                                第一阶段
                                哪吒
                                姜子牙
                                杨戬
                                雷震子
                                封神之战——九龙岛四圣 魔家四将
                            </div>
                        </div>
                    </li>

                </ul>--%>
            </div>
            <a class="comment-entry"  id="writeComment">写短评</a>

        </div>
    </div>
</div>
<!-- cooming  section end -->
<!-- footer  section start -->
<div class="footer_section layout_padding">
    <div class="container">
        <div class="footer_menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="movies.html">Movies</a></li>
                <li><a href="tv.html">TV</a></li>
                <li><a href="celebs.html">Celebs</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">News</a></li>
            </ul>
        </div>
        <div class="social_icon">
            <ul>
                <li><a href="#"><img src="images/fb-icon.png"></a></li>
                <li><a href="#"><img src="images/twitter-icon.png"></a></li>
                <li><a href="#"><img src="images/linkedin-icon.png"></a></li>
                <li><a href="#"><img src="images/instagram-icon.png"></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- footer  section end -->
<!-- copyright section start -->
<div class="copyright_section">
    <div class="container">
        <div class="copyright_text">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
    </div>
</div>

<!-- copyright section end -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<!-- javascript -->

<%--<script src="js/jquery.fancybox.min.js"></script>--%>
<%--<script src="js/gijgo.min.js" type="text/javascript"></script>--%>
<script>

   $(document).ready(function(){
       //获取用户Name
       var accountName ="${sessionScope.account.accountName}";
       if (accountName!=null && accountName!=""){
           $("#accountImg").prop("src","../fileDownload/${sessionScope.account.facePicture}");
           $("#accountImg").css({"width":"50px","height":"50px","border-radius":"50%"});
           $("#accountLoginName").text(accountName);
       }

       //一进页面就发送ajax请求，获取数据进行页面头部渲染
      var movieId = "${param.movieId}";
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movieDetail/getMovieMessage",
           type:"GET",
           contentType:"application/json",
           data:{movieId:movieId},
           dataType:"json",
           success:function(result){
               console.log(result);
               //拼接查询到的信息
                var content = "";

               content = "<div class=\"col-md-6\" style=\"padding-right:5px;max-width: 38%\">\n" +
                   "                <div class=\"image_17\">\n" +
                   "                    <div class=\"image_17\">\n" +
                   "                        <img src=\"../fileDownload/"+result.moviePicture+"\">\n" +
                   "                    </div>\n" +
                   "                </div>\n" +
                   "            </div>"+
                    "                <div class=\"col-md-6\" style=\"padding-left:10px\">\n" +
                    "                <ul class=\"cont-info\" style=\"padding-bottom:55px\">\n" +
                    "                    <li>名称："+result.movieName+"</li>\n" +
                    "                    <li>导演："+result.directorName+"</li>\n" +
                    "                    <li>主演："+result.actorNameList+"</li>\n" +
                    "                    <li>类型: "+result.movieType+"</li>\n" +
                    "                    <li data-spm-anchor-id=\"a1z21.6646385.w1.i0.13b31f04OPDxIP\">制片国家/地区："+result.areaName+"</li>\n" +
                    "                    <li>片长："+result.playTime+"</li>\n" +
                    "                    <li class=\"J_shrink shrink\" data-spm-anchor-id=\"a1z21.6646385.w1.i1.13b31f04OPDxIP\" style=\"display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;work-wrap:break-word;overflow:hidden;text-overflow:ellipsis\"  id='storyIntroduce' >剧情介绍："+result.storyIntroduce+"\n" +
                    "                    </li>\n" +
                        "                  <a class=\"shrink-btn\" href=\"#\" id=\"cutOut\" data-flog='0' >展开&gt;&gt;</a>"+
                    "                </ul>"+
                   "<a href=\"#\" style='margin: 1px' id='collectionMovie'><img src=\"images/star-icon.png\" id='collectionImage' style='height: 30px;width: 30px;'></a>"+
                   "<a class=\"wish-msg\" href=\"#\" style='margin: 1px'>收藏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>"+
                   "<a class=\"wish-msg\" href=\"#\" >评分</a>"+
                    "</div>"
                    $("#movieMessage").append(content);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });

       //进页面查找上架该电影的所有影城
       $.ajax({
           //获取电影id
           async:true,
           url:"${pageContext.request.contextPath}/movieDetail/getCinemaMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               movieId:movieId
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               var content = "";
               for(var i =0;i<result.length;i++){
                   content +=" <a href=\"javascript:;\" class='cinemaAClass' data-cinemaid='"+result[i].cinemaId+"' onclick=\"cinemaDetailsFun('"+result[i].cinemaName+"','"+result[i].cinemaAddress+"',this)\">"+result[i].cinemaName+"</a>"
                   if (i==3){
                       break;
                   }
               }
               content += "<a class=\"J_show select-show\" href=\"javascript:;\" onclick=\"moreCinemaFun()\" id=\"moreCinema\">更多&gt;&gt;</a>"
               $("#cinemaNameDiv").append(content);
               //设置第一个背景颜色为红色
               $("#cinemaNameDiv").children().eq(0).addClass("backgroundClass");
               $("#todaySpan").children().eq(0).addClass("backgroundClass");
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });


      //发送ajax请求进行场次搜索
       //获取第一个影城名
      var cinemaName =  $("#cinemaNameDiv a").eq(0).text();
      //获取第一个类型名
      var typeName = $("#hall-type").children().eq(0).text();
       //获取第一个播放厅名
       var hallName = $("#hallNameId").children().eq(0).text();
      //获取当前日期
       var myDate = new Date();
       var year = myDate.getFullYear();
       var month = myDate.getMonth()+1;
       var day = myDate.getDate();
       var date = year+"-"+month+"-"+day;
       var content = "<a href='#' class='backgroundClass'>"+date+"</a>";
       $("#todaySpan").append(content);

       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movieDetail/getCinemaAndMovieMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               movieId:movieId,
               cinemaName:"万达影院",
               typeName:typeName,
               date:date,
               hallName:hallName
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               //进行动态拼接表格内容
            var content = "";
            for (var i=0;i<result.length;i++){
                //获取开始时间
               var startTime = new Date(result[i].startTime);
                var endTime = new Date(result[i].endTime);
                var startDay = startTime.getDate();
                var startMinutes = startTime.getMinutes();
                var startHours = startTime.getHours();
                var endDay = endTime.getDate();
                var endMinutes = endTime.getMinutes();
                var endHours = endTime.getHours();
                var startDate = startDay+"号"+startHours+"点"+startMinutes+"分";
                var endDate = endDay+"号"+endHours+"点"+endMinutes+"分";
                content+="<tr>\n" +
                    "                <td class=\"hall-time\">\n" +
                    "                    <em class=\"bold\">"+startDate+"</em>\n" +
                    "                </td>\n" +
                    "                <td class=\"hall-type\">\n" +
                    "                    <em class=\"bold\">"+endDate+"</em>\n" +
                    "                </td>\n" +
                    "                <td class=\"hall-name\">\n" +
                    "                    "+result[i].typeName+"\n" +
                    "                </td>\n" +
                    "\n" +
                    "                <td class=\"hall-flow\">\n" +
                    "                    "+result[i].movieName+"\n" +
                    "                </td>\n" +
                    "                <td class=\"hall-price\" data-partcode=\"yueke\">\n" +
                    "                    <em class=\"now\">"+result[i].moviePrice+"</em>\n" +
                    "                </td>\n" +
                    "                <td class=\"hall-seat\">\n" +
                    "                    <a class=\"seat-btn\" href=\"index.jsp?startDate="+startDate+"&endDate="+endDate+"&hallId="+result[i].hallName+"&movieName="+result[i].movieName+"&moviePrice="+result[i].moviePrice+"\" >选座购票</a>\n" +
                    "                </td>\n" +
                    "            </tr>";
            }
            //将其拼接在tbody下
               $("#movieTbody").append(content);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });
       //对收起做点击事件
       $(document).on("click","#cutOut",function () {
           //获取自定义flog的值
           var flog = $("#cutOut").attr("data-flog");
           //判断属性值，1位展开状态，0位收起状态
           if (flog==1){
                //将其收起，只显示两行，并将其自定义属性值改为0
               $("#storyIntroduce").css({"display":"-webkit-box","-webkit-box-orient":"vertical","-webkit-line-clamp":"2","work-wrap":"break-word","overflow":"hidden","text-overflow":"ellipsis"});
               //将收起修改为展开
               $("#cutOut").html("展开&gt;&gt;");
               //修改自定义属性值
               $("#cutOut").attr("data-flog","0");
           }
           if(flog==0){
               $("#storyIntroduce").removeAttr("style");
               $("#storyIntroduce").css("display","inline");
               //将收起修改为展开
               $("#cutOut").html("收起&lt;&lt;");
               //修改自定义属性值
               $("#cutOut").attr("data-flog","1");
           }
       });


       //进页面加载评论信息
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/comment/getFirstCommentMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               movieId:movieId
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               var date;
               var content ="";
               for (var i =0; i<result.length;i++){
                   date = new Date(result[i].commentTime);
                   var day = date.getDate();
                   var year = date.getFullYear();
                   var month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                   var minutes = date.getMinutes();
                   var hours = date.getHours();
                   var seconds = date.getMilliseconds();
                   var myDate = year+"-"+month+"-"+day+"  "+hours+": "+minutes+": "+seconds;
                   content+=" <ul>\n" +
                       "                    <li class=\"comment-container \" >\n" +
                       "                        <div class=\"portrait-container\">\n" +
                       "                            <div class=\"portrait\" >\n" +
                       "                                <img src=\"../fileDownload/"+result[i].facePicture+"\" alt=\"\">\n" +
                       "                            </div>\n" +
                       "                            <div  class=\"main-header clearfix\">\n" +
                       "                                <div class=\"user\">\n" +
                       "                                    <span class=\"name\">"+result[i].userName+"</span>\n" +
                       "                                </div>\n" +
                       "                                <div class=\"time\" title=\"2019-07-21 13:26:07\">\n" +
                       "                                    <span title=\"2019-07-21 13:26:07\">"+myDate+"</span>\n" +
                       "                                    <ul class=\"score-star clearfix\" data-score=\"10\">\n" +
                       "                                        <li>\n" +
                       "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                       "                                        <li>\n" +
                       "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                       "                                        <li>\n" +
                       "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                       "                                        <li>\n" +
                       "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                       "                                        <li>\n" +
                       "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                       "                                    </ul>\n" +
                       "\n" +
                       "                                </div>\n" +
                       "                                \n" +
                       "                            </div>\n" +
                       "                        </div>\n" +
                       "                        <div class=\"main\" data-commentid=\""+result[i].commentId+"\" data-commentname='"+result[i].userName+"'>\n" +
                       "                            <div class=\"comment-content\">\n" +
                                                        result[i].commentContent+
                       "                 <button  class='replyCommentButtonClass' onclick=\"replyCommentFun(this)\" style='visibility: visible' value=\"回复\" data-commentname='"+result[i].userName+"'>回复</button> \n" +
                       "                 <button  class='moreReplyCommentButtonClass' onclick=\"moreReplyCommentFun(this)\" style='visibility: visible' value=\"更多回复\" data-commentname='"+result[i].userName+"'>更多回复</button> \n" +
                       "                            </div>\n" +
                       "                        </div>\n" +
                       "                    </li>\n" +
                       "\n" +
                       "                </ul>";
               }
               //对其进行追加
               $("#realComment").html(content);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });

       //对写短评做点击事件
       $("#writeComment").click(function () {
           //获取用户名称
           var accountName = "${sessionScope.account.accountName}";
           //获取用户头像
           var facePicture = "${sessionScope.account.facePicture}";
           //获取当前系统时间
           var systemDate = new Date();
           var day = systemDate.getDate();
           var year = systemDate.getFullYear();
           var month = systemDate.getMonth()+1;
           var minutes = systemDate.getMinutes();
           var hours = systemDate.getHours();
           var seconds = systemDate.getSeconds();
           var myDate = year+"-"+month+"-"+day+"  "+hours+": "+minutes+": "+seconds;
           //1、弹出一个文本框2、动态拼接后面的评语的格式，并在最后添加一个确定的按钮
           var content ="";
           cantent = " <ul>\n" +
               "                    <li class=\"comment-container \" >\n" +
               "                        <div class=\"portrait-container\">\n" +
               "                            <div class=\"portrait\" >\n" +
               "                                <img src=\"../fileDownload/"+facePicture+"\" alt=\"\">\n" +
               "                            </div>\n" +
               "                            <div  class=\"main-header clearfix\">\n" +
               "                                <div class=\"user\">\n" +
               "                                    <span class=\"name\">"+accountName+"</span>\n" +
               "                                </div>\n" +
               "                                <div class=\"time\" title=\"2019-07-21 13:26:07\">\n" +
               "                                    <span title=\"2019-07-21 13:26:07\">"+myDate+"</span>\n" +
               "                                    <ul class=\"score-star clearfix\" data-score=\"10\">\n" +
               "                                        <li>\n" +
               "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
               "                                        <li>\n" +
               "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
               "                                        <li>\n" +
               "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
               "                                        <li>\n" +
               "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
               "                                        <li>\n" +
               "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
               "                                    </ul>\n" +
               "\n" +
               "                                </div>\n" +
               "                                \n" +
               "                            </div>\n" +
               "                        </div>\n" +
               "                        <div class=\"main\">\n" +
               "                            <div class=\"comment-content\">\n" +
               "                               <input type=\"text\" id=\"commentInput\" data-parentCommentId=\"\">"+
               "                 <button  type=\"button\" class='sendCommentButton' id=\"sendCommentButton\" value=\"发送\">发送</button> \n" +
               "                 <button  type=\"button\" class=\"cancelCommentButton\" id=\"cancelCommentButton\" value=\"取消\">取消</button> \n" +
               "                            </div>\n" +
               "                        </div>\n" +
               "                    </li>\n" +
               "\n" +
               "                </ul>";
        //对其进行追加
           $("#realComment").prepend(cantent);
       });




   });

   //对发送按钮做点击事件
   $(document).on("click","#sendCommentButton",function () {
       //将评论区的阴影去掉，将发送和取消两个按钮去掉
       $("#commentInput").css("background-color","rgba(191, 180, 143, 0)");
       $("#sendCommentButton").hide();
       $(".sendCommentButton").hide();
       $(".cancelCommentButton").hide();
       $(".replyCommentButtonClass").css("visibility","visible");
       //1获取用户id
       var userId = "${sessionScope.account.accountId}";
       //2获取评论内容
       var commentContent = $("#commentInput").val();
       //3获取父评论id
       var parentCommentId = $(this).parent().children().attr("data-parentCommentId");
       //获取电影id
       var movieId = "${param.movieId}";
       //发送ajax请求，对数据库插入一条评论数据
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/comment/commentMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               userId:userId,
               commentContent:commentContent,
               parentCommentId:parentCommentId,
               movieId:movieId
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               //将评论id作为自定义属性放在评论的标签里
               $("#commentInput").attr("data-parentCommentId",result);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });
   });

   //对取消按钮的点击事件
   $(document).on("click","#cancelCommentButton",function () {
       $(this).parents("ul").remove();
   });

   function cancelCommentFun(a){
       $(a).parent().parent().parent().remove();
       $(".replyCommentButtonClass").css("visibility","visible");
   }
   function replyCommentFun(commentIdAttr){
       //将回复按钮设置为不可见
       $(commentIdAttr).css("visibility","hidden");
       //获取自定义属性commentIdAttr
       var commentId = $(commentIdAttr).parent().parent().attr("data-commentid");
       var commentName = $(commentIdAttr).attr("data-commentname");
       //获取用户名称
       var userName = "${sessionScope.account.accountName}";
       //获取用户头像
       var facePicture = "${sessionScope.account.facePicture}";
       //获取当前系统时间
       var systemDate = new Date();
       var day = systemDate.getDate();
       var year = systemDate.getFullYear();
       var month = systemDate.getMonth()+1;
       var minutes = systemDate.getMinutes();
       var hours = systemDate.getHours();
       var seconds = systemDate.getSeconds();
       var myDate = year+"-"+month+"-"+day+"  "+hours+": "+minutes+": "+seconds;
       var content ="";
       content = " <ul class='chileCommentUl'>\n" +
           "                    <li class=\"comment-container \" >\n" +
           "                        <div class=\"portrait-container\">\n" +
           "                            <div class=\"portrait\" >\n" +
           "                                <img src=\"../fileDownload/"+facePicture+"\" alt=\"\" class='chileComment'>\n" +
           "                            </div>\n" +
           "                            <div  class=\"main-header clearfix\">\n" +
           "                                <div class=\"user\">\n" +
           "                                    <span class=\"name\">"+userName+"&nbsp;&nbsp;回复&nbsp;&nbsp;"+commentName+"</span>\n" +
           "                                </div>\n" +
           "                                <div class=\"time\" title=\"2019-07-21 13:26:07\">\n" +
           "                                    <span title=\"2019-07-21 13:26:07\">"+myDate+"</span>\n" +
           "                                    <ul class=\"score-star clearfix\" data-score=\"10\">\n" +
           "                                        <li>\n" +
           "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
           "                                        <li>\n" +
           "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
           "                                        <li>\n" +
           "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
           "                                        <li>\n" +
           "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
           "                                        <li>\n" +
           "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
           "                                    </ul>\n" +
           "\n" +
           "                                </div>\n" +
           "                                \n" +
           "                            </div>\n" +
           "                        </div>\n" +
           "                        <div class=\"main\">\n" +
           "                            <div class=\"comment-content\">\n" +
           "                               <input type=\"text\" id=\"commentInput\" data-parentCommentId=\""+commentId+"\">"+
           "                 <button  type=\"button\" class=\"sendCommentButton\" id=\"sendCommentButton\" value=\"发送\">发送</button> \n" +
           "                 <button  type=\"button\" class=\"cancelCommentButton\" onclick='cancelCommentFun(this)' value=\"取消\">取消</button> \n" +
           "                            </div>\n" +
           "                        </div>\n" +
           "                    </li>\n" +
           "\n" +
           "                </ul>";
       $(commentIdAttr).parent().parent().append(content);

   }

   function moreCinemaFun(){
       //获取电影id
       var movieId = "${param.movieId}";
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movieDetail/getCinemaMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               movieId:movieId
           },
           dataType:"json",
           success:function(result){
               var content = "";
               for(var i =0;i<result.length;i++){
                   content +=" <a href=\"javascript:;\" class='cinemaAClass' onclick=\"cinemaDetailsFun('"+result[i].cimemaName+"','"+result[i].cinemaAddress+"',this)\">"+result[i].cimemaName+"</a>"
               }
               //清空存放影院名称的div
               $("#cinemaNameDiv").empty();
               $("#cinemaNameDiv").append(content);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });

   }

   function cinemaDetailsFun(cinemaName,cinemaAddress,thisObject){
       //点击之前先删除之前的div
       $(".cinemaDetailsMessage").remove();
       //清除其所有背景颜色，为自己添加背景颜色
        $(".cinemaAClass").removeClass("backgroundClass");
        //为自己添加类样式
       $(thisObject).addClass("backgroundClass");
       //拼接详情div
       var content = "";
       content = "<div class=\"cinemaDetailsMessage\">\n" +
           "                    <p style=\"font-size: 30px;color: #00b5f9\">"+cinemaName+"</p>\n" +
           "                    <p style=\"font-size: 20px\">"+cinemaAddress+"</p>\n" +
           "                </div>"
       $("#cinemaDetailsLi").append(content);
       //调用sendAjax方法
       sendAjax();
   }

   //对类型做点击事件
   $(".hallType").click(function () {
       //清除其所有背景颜色，为自己添加背景颜色
       $(".hallType").removeClass("backgroundClass");
       //为自己添加背景颜色
       $(this).addClass("backgroundClass");
       //调用sendAjax方法
       sendAjax();
   });
   //对播放厅做点击事件
   $(".hallName").click(function () {
       //清除其所有背景颜色，为自己添加背景颜色
       $(".hallName").removeClass("backgroundClass");
       //为自己添加背景颜色
       $(this).addClass("backgroundClass");
       //调用sendAjax方法
       sendAjax();
   });

   //对日期做点击事件
   $("#dateLabel").click(function () {
       //获取日期框的值
       var date = $("#dateInpute").val();
       //将值填充到第一个日期中
       $("#todaySpan a").text(date);
       //调用发送ajax请求方法
       sendAjax();
   });

   //通用查询场次管理的ajax请求
   function sendAjax(){
       //获取电影id
       var movieId = "${param.movieId}";
       var cinemaName =  $("#cinemaNameDiv .backgroundClass").text();
       //获取类型名
       var typeName = $("#hall-type .backgroundClass").text();
       //获取播放厅名
       var hallName = $("#hallNameId .backgroundClass").text();
       //获取选择的日期
        var date = $("#todaySpan .backgroundClass").text();
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movieDetail/getCinemaAndMovieMessage",
           type:"GET",
           contentType:"application/json",
           data:{
               movieId:movieId,
               cinemaName:cinemaName,
               typeName:typeName,
               date:date,
               hallName:hallName
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               //进行动态拼接表格内容
               var content = "";
               for (var i=0;i<result.length;i++){
                   //获取开始时间
                   var startTime = new Date(result[i].startTime);
                   var endTime = new Date(result[i].endTime);
                   var startDay = startTime.getDate();
                   var startMinutes = startTime.getMinutes();
                   var startHours = startTime.getHours();
                   var endDay = endTime.getDate();
                   var endMinutes = endTime.getMinutes();
                   var endHours = endTime.getHours();
                   var startDate = startDay+"号"+startHours+"点"+startMinutes+"分";
                   var endDate = endDay+"号"+endHours+"点"+endMinutes+"分";
                   content+="<tr>\n" +
                       "                <td class=\"hall-time\">\n" +
                       "                    <em class=\"bold\">"+startDate+"</em>\n" +
                       "                </td>\n" +
                       "                <td class=\"hall-type\">\n" +
                       "                    <em class=\"bold\">"+endDate+"</em>\n" +
                       "                </td>\n" +
                       "                <td class=\"hall-name\">\n" +
                       "                    "+result[i].typeName+"\n" +
                       "                </td>\n" +
                       "\n" +
                       "                <td class=\"hall-flow\">\n" +
                       "                    "+result[i].movieName+"\n" +
                       "                </td>\n" +
                       "                <td class=\"hall-price\" data-partcode=\"yueke\">\n" +
                       "                    <em class=\"now\">"+result[i].moviePrice+"</em>\n" +
                       "                </td>\n" +
                       "                <td class=\"hall-seat\">\n" +
                       "                    <a class=\"seat-btn\" href=\"index.jsp?startDate="+startDate+"&cinemaId="+result[i].cinemaId+"&hallId="+result[i].hallId+"&movieId="+result[i].movieId+"&moviePrice="+result[i].moviePrice+"\" >选座购票</a>\n" +
                       "                </td>\n" +
                       "            </tr>";
               }
               //清空原有的场次信息
               $("#movieTbody").empty();
               //将其拼接在tbody下
               $("#movieTbody").append(content);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });
   };

   //对收藏小星星做点击事件
   $(document).on("click","#collectionMovie",function(){
       //将图片颜色设为红色
       $("#collectionImage").css("background","red");
       //获取电影id
       var movieId = "${param.movieId}";
       //获取用户id
        var userId ="${sessionScope.account.accountId}";
        //获取影院名称
       var cinemaId =  $("#cinemaNameDiv .backgroundClass").attr("data-cinemaid");
       //发送ajax请求
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movieCollection/addMovieCollection",
           type:"GET",
           data:{
               movieId:movieId,
               userId:userId,
               cinemaId:cinemaId
           },
           success:function(result){
               console.log(result);
           },
           //请求失败时的响应函数
           error:function(){
               console.log("请求失败");
           }
       });
   });

    //对更多回复做点击事件
    function moreReplyCommentFun(thisObject) {
        //获取父评论id
        var parentCommentId = $(thisObject).parent().parent().attr("data-commentid");
        //获取电影id
        var movieId = "${param.movieId}";
        // var movieId = "101";
        //用户名
        var commentName = $(thisObject).attr("data-commentname");
        //发送ajax请求
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/comment/getMoreCommentMessage",
            type:"GET",
            contentType:"application/json",
            data:{
                parentCommentId:parentCommentId,
                movieId:movieId
            },
            dataType:"json",
            success:function(result){
                console.log(result);
                var date;
                var content ="";
                for (var i =0; i<result.length;i++){
                    date = new Date(result[i].commentTime);
                    var day = date.getDate();
                    var year = date.getFullYear();
                    var month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
                    var minutes = date.getMinutes();
                    var hours = date.getHours();
                    var seconds = date.getSeconds();
                    var myDate = year+"-"+month+"-"+day+"  "+hours+": "+minutes+": "+seconds;
                    content += " <ul class='chileCommentUl'>\n" +
                        "                    <li class=\"comment-container \" >\n" +
                        "                        <div class=\"portrait-container\">\n" +
                        "                            <div class=\"portrait\" >\n" +
                        "                                <img src=\"../fileDownload/"+result[i].facePicture+"\" alt=\"\" class='chileComment'>\n" +
                        "                            </div>\n" +
                        "                            <div  class=\"main-header clearfix\">\n" +
                        "                                <div class=\"user\">\n" +
                        "                                    <span class=\"name\">"+result[i].userName+"&nbsp;&nbsp;回复&nbsp;&nbsp;"+commentName+"</span>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"time\" title=\"2019-07-21 13:26:07\">\n" +
                        "                                    <span title=\"2019-07-21 13:26:07\">"+myDate+"</span>\n" +
                        "                                    <ul class=\"score-star clearfix\" data-score=\"10\">\n" +
                        "                                        <li>\n" +
                        "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                        "                                        <li>\n" +
                        "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                        "                                        <li>\n" +
                        "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                        "                                        <li>\n" +
                        "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                        "                                        <li>\n" +
                        "                                            <i class=\"half-star left active\"></i><i class=\"half-star right active\"></i>    </li>\n" +
                        "                                    </ul>\n" +
                        "\n" +
                        "                                </div>\n" +
                        "                                \n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"main\" data-commentid=\""+result[i].commentId+"\" data-commentname='"+result[i].userName+"'>\n" +
                        "                            <div class=\"comment-content\">\n" +
                                                            result[i].commentContent+
                        "                                   <button  class='replyCommentButtonClass' onclick=\"replyCommentFun(this)\" style='visibility: visible' value=\"回复\" data-commentname='"+result[i].userName+"'>回复</button> \n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </li>\n" +
                        "\n" +
                        "                </ul>";
                }
                $(thisObject).parents(".main").append(content)
            },
            //请求失败时的响应函数
            error:function(){
                console.log("请求失败");
            }
        });
    }
</script>
</body>
</html>
